<template>
	<view class="page-container">
		<!-- 模拟顶部信息条 -->
		<!-- 在实际应用中，这部分通常由 uni-app 导航栏或独立组件处理 -->
		<view class="custom-header">
			<view class="header-item" @click="navigateBack"><text class="icon"></text><text>主页</text></view>
			<view class="header-item" @click="navigateBack"><text class="icon"></text><text>返回</text></view>
			<view class="header-item">{{ phoneNumber }}</view>
			<view class="header-item" @click="logout">
				<text>退出</text>
			</view>
			<view class="header-item" @click="goToManagement">
				<text>管理中心</text>
			</view>

			<view class="main-content">
				<view class="page-title">纪念馆模板设置</view>

				<view class="template-selection-section">
					<view class="section-title">纪念馆模板选择</view>
					<view class="template-grid">
						<view v-for="template in templates" :key="template.id" class="template-item"
							:class="{ selected: selectedTemplateId === template.id }"
							@click="selectTemplate(template.id)">
							<view class="radio-button">
								<view class="outer-circle"></view>
								<view v-if="selectedTemplateId === template.id" class="inner-circle"></view>
							</view>
							<view class="template-preview-wrapper">
								<image :src="template.imageSrc" mode="widthFix" class="template-preview"></image>
							</view>
							<view class="template-info">
								<text class="template-name">{{ template.name }}</text>
								<text class="template-restriction">{{ template.restriction }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="action-buttons">
					<button class="button save-button" @click="saveSettings">保存修改后的设置</button>
					<button class="button cancel-button" @click="cancelAndReturn">不保存返回上一页</button>
				</view>

				<view class="qr-section">
					<view class="qr-block">
						<image src="/static/qrcode_gzh.png" mode="widthFix" class="qr-code-image"></image>
						<text class="qr-label">微信公众号</text>
					</view>
					<view class="qr-block">
						<image src="/static/qrcode_kefu.png" mode="widthFix" class="qr-code-image"></image>
						<text class="qr-label">客服微信</text>
					</view>
				</view>
			</view>

			<!-- 底部导航/信息区域 -->
			<view class="bottom-footer">
				<view class="footer-links">
					<text>网上纪念馆</text><text class="link-separator">|</text>
					<text>天堂资讯</text><text class="link-separator">|</text>
					<text>帮助中心</text><text class="link-separator">|</text>
					<text>关于今生永恒网</text><text class="link-separator">|</text>
					<text>联系今生永恒网</text>
				</view>
				<view class="copyright">版权所有 ©今生永恒网 www.cqjsyh.com</view>
				<view class="icp">服务条款 [渝ICP备2025058791号-1]</view>
			</view>

			<!-- 返回顶部按钮 -->
			<view v-if="showBackToTop" class="back-to-top" @click="scrollToTop">
				<text>顶部</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onUnload
	} from '@dcloudio/uni-app'; // 引入uni-app特有的生命周期

	const phoneNumber = ref(''); // 模拟手机号
	const selectedTemplateId = ref(1); // 默认选中的模板 ID
	const showBackToTop = ref(false); // 控制返回顶部按钮显示/隐藏

	// 模拟模板数据
	const templates = ref([{
			id: 1,
			name: '通用模板',
			restriction: '使用权限: 通用',
			imageSrc: '/static/template1.png'
		},
		{
			id: 2,
			name: '时空思忆',
			restriction: '豪华馆/尊贵馆',
			imageSrc: '/static/template2.png'
		},
		{
			id: 3,
			name: '禅意',
			restriction: '尊贵馆专用',
			imageSrc: '/static/template3.png'
		},
		{
			id: 4,
			name: '烛光祭',
			restriction: '豪华馆/尊贵馆',
			imageSrc: '/static/template4.png'
		},
		{
			id: 5,
			name: '爱之永恒',
			restriction: '豪华馆/尊贵馆',
			imageSrc: '/static/template5.png'
		},
		{
			id: 6,
			name: '儿童乐园',
			restriction: '豪华馆/尊贵馆',
			imageSrc: '/static/template6.png'
		},
		{
			id: 7,
			name: '莺啼柳绿',
			restriction: '尊贵馆专用',
			imageSrc: '/static/template7.png'
		},
		{
			id: 8,
			name: '世外桃源',
			restriction: '尊贵馆专用',
			imageSrc: '/static/template8.png'
		},
		// 可以根据需要添加更多模板
	]);

	// 页面加载生命周期 (虽然这里没有用到options，但保留onLoad结构)
	onLoad(() => {
		console.log('页面加载完成');
		// 可以在这里获取页面参数等
	});

	// 页面滚动生命周期
	onPageScroll((e) => {
		// 当页面滚动超过一定距离时显示返回顶部按钮
		showBackToTop.value = e.scrollTop > 200; // 距离顶部 200px
	});

	// 选择模板的方法
	const selectTemplate = (id) => {
		selectedTemplateId.value = id;
		console.log('选中了模板 ID:', id);
		// 这里可以添加选中后的其他逻辑，例如更新预览等
	};

	// 返回顶部的方法
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0, // 滚动到顶部
			duration: 300 // 滚动动画时长
		});
	};

	// 模拟顶部 header 的点击方法
	const navigateBack = () => {
		console.log('点击了返回/主页');
		// 实际应用中可以使用 uni.navigateBack() 或 uni.switchTab() / uni.redirectTo()
		uni.navigateBack(); // 示例：返回上一页
	};

	const logout = () => {
		console.log('点击了退出');
		// 实际应用中执行退出登录逻辑
	};

	const goToManagement = () => {
		console.log('点击了管理中心');
		// 实际应用中跳转到管理中心页面
		// uni.navigateTo({ url: '/pages/management/index' }); // 示例
	};

	// 保存设置的方法
	const saveSettings = () => {
		console.log('保存设置，当前选中模板 ID:', selectedTemplateId.value);
		// 在这里实现保存设置的逻辑，例如调用API
		uni.showToast({
			title: '设置已保存',
			icon: 'success'
		});
	};

	// 不保存返回上一页的方法
	const cancelAndReturn = () => {
		console.log('取消并返回上一页');
		// 在这里实现返回上一页的逻辑
		uni.navigateBack();
	};

	// 页面卸载生命周期 (如果需要清理定时器等)
	onUnload(() => {
		console.log('页面即将卸载');
	});
</script>

<style scoped>
	/* 使用 rpx 单位进行移动端适配，750rpx = 屏幕宽度 */
	.page-container {
		background-color: #f4f4f4;
		/* 页面背景色 */
		min-height: 100vh;
		/* 确保页面内容少时也能占满一屏 */
		padding-bottom: 120rpx;
		/* 为返回顶部按钮留出底部空间 */
	}

	/* 模拟顶部信息条样式 */
	.custom-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: white;
		font-size: 24rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
		/* 如果需要固定顶部，取消下方注释 */
		/*
    position: sticky;
    top: 0;
    z-index: 100;
    */
	}

	.header-item {
		display: flex;
		align-items: center;
	}

	.header-item .icon {
		margin-right: 5rpx;
		/* 图标和文字间距 */
		font-size: 28rpx;
		/* 图标大小 */
	}

	.header-item text:last-child {
		margin-left: 5rpx;
		/* 文字之间的间距 */
	}

	.main-content {
		padding: 20rpx;
	}

	.page-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
	}

	.template-selection-section {
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		border-left: 8rpx solid #ff5722;
		/* 左侧橙色粗条 */
		padding-left: 15rpx;
		color: #333;
	}

	.template-grid {
		display: grid;
		/* 两列布局，每列宽度相等 */
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		/* 网格项之间的间距 */
	}

	.template-item {
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		overflow: hidden;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 内容水平居中 */
		position: relative;
		/* 用于定位单选框 */
		background-color: #fff;
		/* 背景色 */
	}

	/* 选中时的边框样式 */
	.template-item.selected {
		border-color: #ff5722;
		border-width: 2rpx;
	}


	.radio-button {
		position: absolute;
		top: 15rpx;
		/* 根据截图调整位置 */
		left: 15rpx;
		/* 根据截图调整位置 */
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		/* 确保在图片上方 */
	}

	.radio-button .outer-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #999;
		border-radius: 50%;
	}

	.radio-button .inner-circle {
		width: 20rpx;
		height: 20rpx;
		background-color: #ff5722;
		/* 橙色 */
		border-radius: 50%;
		position: absolute;
		/* 相对于 radio-button 定位 */
	}

	.template-preview-wrapper {
		width: 100%;
		/* 如果需要固定预览图高度，可以设置 max-height 和 overflow: hidden */
		/* max-height: 200rpx; */
		/* overflow: hidden; */
	}

	.template-preview {
		width: 100%;
		/* 图片宽度占满容器 */
		height: auto;
		/* 保持图片纵横比 */
		display: block;
		/* 移除图片底部的额外空间 */
	}

	.template-info {
		width: 100%;
		/* 信息区域占满宽度 */
		text-align: center;
		padding-top: 10rpx;
		/* 与图片间距 */
	}

	.template-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		/* margin-bottom: 5rpx; 垂直排列时不需要 */
		display: block;
		/* 独占一行 */
	}

	.template-restriction {
		font-size: 24rpx;
		color: #999;
		display: block;
		/* 独占一行 */
		margin-top: 5rpx;
		/* 与名称间距 */
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		/* 按钮之间平均分布空间 */
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.action-buttons .button {
		width: 45%;
		/* 按钮宽度 */
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 1.2;
		/* 调整行高使文本居中 */
	}

	.save-button {
		background-color: #ff5722;
		/* 橙色背景 */
		color: white;
		border: none;
	}

	.cancel-button {
		background-color: #eee;
		color: #333;
		border: 1rpx solid #ccc;
	}

	.qr-section {
		display: flex;
		justify-content: center;
		/* QR 块水平居中 */
		gap: 40rpx;
		/* QR 块之间的间距 */
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.qr-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 垂直方向居中 */
	}

	.qr-code-image {
		width: 200rpx;
		/* QR 码大小 */
		height: 200rpx;
		/* QR 码大小 */
		margin-bottom: 10rpx;
	}

	.qr-label {
		font-size: 28rpx;
		color: #555;
	}

	/* 底部导航/信息区域样式 */
	.bottom-footer {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		padding: 30rpx 20rpx;
		border-top: 1rpx solid #eee;
		background-color: white;
	}

	.footer-links text {
		margin: 0 10rpx;
		/* 链接之间的间距 */
		display: inline-block;
		/* 使外边距生效 */
	}

	.link-separator {
		color: #ccc;
		/* 分隔符颜色 */
	}

	.footer-links text:first-child {
		margin-left: 0;
	}

	.footer-links text:last-child {
		margin-right: 0;
	}

	.copyright,
	.icp {
		margin-top: 10rpx;
		/* 行间距 */
	}


	/* 返回顶部按钮样式 */
	.back-to-top {
		position: fixed;
		bottom: 120rpx;
		/* 距离底部120rpx，避免与底部内容重叠 */
		right: 40rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.6);
		/* 半透明黑色背景 */
		color: white;
		border-radius: 50%;
		/* 圆形 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		z-index: 10;
		/* 确保在其他内容上方 */
	}
</style>